<template>
	<view class="wrap">
	
		<view class="from">
			<view class="from-item" v-if="userData">
				<text class="area">{{userData.countryNo}}</text>
				<input type="number" disabled :placeholder="userData.mobile" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="number" style="width: 350rpx;" v-model="userPhone.code" placeholder="请输入验证码" placeholder-class="phl" />
				<text class="code" @click="getCode">{{codeMessage}}</text>
			</view>
			
			<view class="from-item">
				<input type="password" v-model="userPhone.password" placeholder="请输入8到18位字母+数字密码" placeholder-class="phl" />
			</view>
			<view class="from-item">
				<input type="password" v-model="newPassWord" placeholder="再次输入新密码确认" placeholder-class="phl" />
			</view>
			<button  class="submit" @click="submit">确定</button>
			
		</view>
	</view>
</template>

<script setup>
	
	import {
		updatePassword,
		user,
		smsCode
	} from '@/util/api.js'
	import {
		ref
	} from "vue";
	const userPhone = ref({
		mobile: "",
		password: ""
		
	})
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(()=>{
		getUser()
	})
	const newPassWord = ref()
	const userData = ref()
	// 获取短信
	const codeMessage = ref("获取验证码")
	let bok = true
	let num = 60
	const getCode = async ()=>{
		
		if(!bok) return false;
		bok = false
		uni.showLoading({
			mask:true
		})
		const result = await smsCode({countryNo:userData.value.countryNo,mobile:userData.value.mobile})
		uni.hideLoading()
		if(result.code!=200){
			bok = true
			codeMessage.value = "获取验证码"
			return false
		}
		let timer = setInterval(()=>{
			num--
			codeMessage.value = `${num}秒后重试`
			if(num<=0){
				bok = true
				codeMessage.value = "获取验证码"
				clearInterval(timer)
			}
		},1000)
	}
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			result.data.phone = result.data.mobile.slice(0,3)+'****'+result.data.mobile.slice(7,11)
			
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	const submit  = async ()=>{
		
		if(!userPhone.value.password){
			uni.showModal({
				title:"提示",
				content:"请输入密码",
				showCancel:false
			})
			return false;
		}
		if(!userPhone.value.code){
			uni.showModal({
				title:"提示",
				content:"请输入验证码",
				showCancel:false
			})
			return false;
		}
		if(userPhone.value.password != newPassWord.value){
			uni.showModal({
				title:"提示",
				content:"两次密码输入不一致",
				showCancel:false
			})
			return false;
		}
		
		const result = await updatePassword(userPhone.value)
		if(result.code==200){
			uni.showModal({
				title:"提示",
				content:"修改成功",
				showCancel:false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
		
	}
</script>

<style lang="scss"> 
.from{
	margin-top: 38rpx;
	padding: 0 38rpx;
	.from-item{
		width: 519rpx;
		height: 100rpx;
		background: #F6F6FF;
		border-radius: 71rpx;
		margin-bottom: 38rpx;
		display: flex;
		align-items: center;
		padding: 0 77rpx;
		.phl{
			color: #999;
			font-size: 28rpx;
		}
		.area{
			display: block;
			margin-right: 38rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}
		.code{
			font-weight: bold;
			display: block;
			
			color: #333333;
			font-size: 28rpx;
		}
	}
	.submit{
		width: 673rpx;
		height: 100rpx;
		background: #0265FF;
		box-shadow: 0px 12rpx 23rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 71rpx ;
		margin: 77rpx auto 38rpx;
		border: none;
		color: #fff;
		font-weight: 800;
		font-size: 38rpx;
		line-height: 100rpx;
	}
	
}

.wrap{
	overflow: hidden;
}

</style>
